<template>
	<div id="app">
		<div v-if="isLogin">
			<TheHeader />
		</div>
		<!-- <router-view /> -->
	</div>
	<router-view />
	<TheFooter />
</template>

<script setup>
import TheHeader from "./components/TheHeader.vue"
import TheFooter from "./components/TheFooter.vue"
import { useRoute } from "vue-router"
import { watchEffect, ref } from "vue"

const isLogin = ref(false)
const route = useRoute()

watchEffect(() => {
	isLogin.value = !(route.fullPath == "/login")
})
</script>

<style>
html,
body {
	margin: 0;
	background-image: linear-gradient(
			to right,
			rgba(37, 82, 110, 0.1) 1px,
			transparent 1px
		),
		linear-gradient(to bottom, rgba(37, 82, 110, 0.1) 1px, transparent 1px);
	background-size: 1.5rem 1.5rem;
}
::-webkit-scrollbar {
	width: 10px;
	height: 6px;
}
::-webkit-scrollbar-thumb {
	background-color: rgb(201, 201, 201);
	border-radius: 10px;
}
</style>
